<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>产品列表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:hover { background-color: #f5f5f5; }

        .pagination {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .pagination a, .pagination span {
            padding: 8px 16px;
            border: 1px solid #ddd;
            margin: 0 4px;
            text-decoration: none;
            color: #333;
        }
        .pagination a.active {
            background: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }
        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }

        .actions {
            display: flex;
            gap: 10px;
        }
        .btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-edit {
            background-color: #2196F3;
            color: white;
        }
        .btn-delete {
            background-color: #f44336;
            color: white;
        }
        .search-box {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .page-size {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .page-size select {
            padding: 6px;
        }
    </style>
    <script>
        function confirmDelete() {
            return confirm("确定要删除此产品吗？");
        }
    </script>
</head>
<body>
<h1>产品列表</h1>

<!-- 搜索和分页设置 -->
<div class="search-box">
    <form action="/user/list" method="get">
        <input type="text" name="keyword" value="${param.keyword}" placeholder="输入产品名称" style="padding: 6px; width: 300px;">
        <input type="hidden" name="pageSize" value="${param.pageSize}">
        <button type="submit" style="padding: 6px 12px;">搜索</button>
    </form>

    <div class="page-size">
        <span>每页显示：</span>
        <form id="pageSizeForm" action="/user/list" method="get">
            <input type="hidden" name="keyword" value="${param.keyword}">
            <select name="pageSize" onchange="this.form.submit()">
                <option value="5" ${param.pageSize == 5 ? 'selected' : ''}>5</option>
                <option value="10" ${param.pageSize == 10 ? 'selected' : ''}>10</option>
                <option value="20" ${param.pageSize == 20 ? 'selected' : ''}>20</option>
                <option value="50" ${param.pageSize == 50 ? 'selected' : ''}>50</option>
            </select>
        </form>
    </div>
</div>

<!-- 添加产品按钮 -->
<a href="/user/add" style="display: inline-block; padding: 8px 16px; background: #4CAF50; color: white; text-decoration: none; margin-bottom: 20px;">添加新产品</a>

<!-- 产品列表表格 -->
<table>
    <tr>
        <th>ID</th>
        <th>产品名称</th>
        <th>分类</th>
        <th>品牌</th>
        <th>价格</th>
        <th>库存</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <c:choose>
        <c:when test="${not empty pageInfo.products}">
            <c:forEach items="${pageInfo.products}" var="product">
                <tr>
                    <td>${product.id}</td>
                    <td>${product.name}</td>
                    <td>${product.category}</td>
                    <td>${product.brand}</td>
                    <td>${product.price}</td>
                    <td>${product.stock}</td>
                    <td>${product.status == 1 ? '上架' : '下架'}</td>
                    <td class="actions">
                        <a href="/user/update/${product.id}" class="btn btn-edit">编辑</a>
                        <form action="/user/delete/${product.id}" method="post" style="display:inline;">
                            <button type="submit" class="btn btn-delete" onclick="return confirmDelete()">删除</button>
                        </form>
                    </td>
                </tr>
            </c:forEach>
        </c:when>
        <c:otherwise>
            <tr>
                <td colspan="8" style="text-align: center;">没有找到产品数据</td>
            </tr>
        </c:otherwise>
    </c:choose>
</table>

<!-- 分页导航 -->
<c:if test="${pageInfo.pageTotal > 0}">
    <div class="pagination">
        <!-- 上一页 -->
        <c:if test="${param.pageName > 1}">
            <a href="/user/list?keyword=${param.keyword}&pageName=${param.pageName-1}&pageSize=${param.pageSize}">上一页</a>
        </c:if>

        <!-- 页码 -->
        <c:forEach begin="1" end="${pageInfo.pageTotal}" var="i">
            <c:choose>
                <c:when test="${i eq param.pageName}">
                    <span class="active">${i}</span>
                </c:when>
                <c:otherwise>
                    <a href="/user/list?keyword=${param.keyword}&pageName=${i}&pageSize=${param.pageSize}">${i}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <!-- 下一页 -->
        <c:if test="${param.pageName < pageInfo.pageTotal}">
            <a href="/user/list?keyword=${param.keyword}&pageName=${param.pageName+1}&pageSize=${param.pageSize}">下一页</a>
        </c:if>

        <!-- 总页数信息 -->
        <span>共 ${pageInfo.pageTotal} 页 / ${pageInfo.total} 条记录</span>
    </div>
</c:if>
</body>
</html>